<template>
    <div class="wrapper">
        <div class="top-header">
            <div class="left-icon" @click="$router.go(-1)">
                <van-icon name="arrow-left" size="20" color="#fff" />
            </div>
            <div class="title">按天配资</div>
            <div class="right-icon" @click="toList()">
                <van-icon name="notes-o" size="20" color="#fff"  />
            </div>
        </div>
        <div class="select-card">
            <div class="select-btn" :class="item.id == active_tab_id?'active':''" v-for="item in tabs" :key="item.id" @click="changeTab(item.id)">
                {{ item.name }}
            </div>
        </div>
        <div class="title1">请输入保证金金额</div>
        <div class="select-card">
            <div class="cu-input-box">
                <input class="cu-input" v-model="form.margin" :placeholder="`保证金介于 ${fundsSetting.marginMin} - ${fundsSetting.marginMax} 元之间`" type="text">
            </div>
        </div>
        <div class="title1">请选择操盘期限</div>
        <div class="select-card" @click="open()">
            <div class="cu-input-box">
                <div class="cu-input" v-if="selDaysUseVal">
                    {{selDaysUseVal}}
                </div>
                <div class="cu-input" v-else>
                    操盘期限介于 {{selMinDay}} - {{selMaxDay}}  天之间
                </div>
                <van-icon name="arrow-down" />
            </div>
        </div>
        <!-- <div class="days-box">
            <div class="days-box_tile">
                <span>操盘期限</span>
                <span
                style="font-size:.24rem;color:#fff8"
                :style="{color:$state.theme =='red'?'#222':''}"
                >（操盘期限介于 {{selMinDay}} - {{selMaxDay}}  天之间）</span>
            </div>
            <div class="days-box_items beishu">
                <div
                :class="['days-box_item']"
                >
                <input type="text" v-model="selDaysUseVal"
                @blur="currentSelDays"
                >
                </div>
                <span class="unit">天</span>
            </div>
        </div>  -->
        <div class="title1">请选择配资金额</div>
        <div class="select-card1">
            <div 
                v-for="(item, index) in fundsTypeList" :key="item.id"
                :class="['card-item',selLever==item.lever?'active':'',form.margin>0?'white-bg':'']"
                @click="currentSel(item)"
                >
                    <span class="money" v-if="!form.margin">配资金额</span>
                    <span class="money" v-else>{{ level_margin(item.lever) }}</span>
                    <span>{{item.lever}}倍</span>
            </div>
        </div>
        <!-- <div class="days-box">
            <div class="days-box_tile">
                <span>配资资金</span>
                <span
                style="font-size:.24rem;color:#fff8"
                :style="{color:$state.theme =='red'?'#222':''}"
                >（配资资金为{{fundsAmount}}元）</span>
            </div>
        </div>
        <div class="days-box">
            <div class="days-box_tile">
                <span>保证金</span>
                <span
                style="font-size:.24rem;color:#fff8"
                :style="{color:$state.theme =='red'?'#222':''}"
                >（保证金介于 {{fundsSetting.marginMin}} - {{fundsSetting.marginMax}} 元之间）</span>
            </div>
            <div class="days-box_items">
                <div
                :class="['days-box_item', item.value == form.margin?'active':'']"
                v-for="(item, key) in bzjs"
                :key="key"
                @click="setBaozhen(item.value)"
                >{{item.label}}</div>
                <div
                :class="['days-box_item', zidinyi?'active':'']"
                @click="setBaozhen('')"
                >
                自定义
                </div>
                <div
                class="days-box_item"
                @click="setBaozhen('')"
                >
                <input v-show="zidinyi" type="text" v-model="form.margin">
                </div>
            </div>
        </div>
        <div class="days-box">
            <div class="days-box_tile">
                <span>配资资金</span>
                <span
                style="font-size:.24rem;color:#fff8"
                :style="{color:$state.theme =='red'?'#222':''}"
                >（配资资金为{{fundsAmount}}元）</span>
            </div>
            <div class="days-box_items beishu">
                <div 
                v-for="(item, index) in fundsTypeList" :key="item.id"
                :class="['days-box_item', selLever==item.lever?'active':'']"
                :style="{marginRight:(index+1)%4==0&&'0'}"
                @click="currentSel(item)"
                >
                    {{item.lever}}倍
                </div>
            </div>
        </div> 
        <div class="days-box">
            <div class="days-box_tile">
                <span>操盘期限</span>
                <span
                style="font-size:.24rem;color:#fff8"
                :style="{color:$state.theme =='red'?'#222':''}"
                >（操盘期限介于 {{selMinDay}} - {{selMaxDay}}  天之间）</span>
            </div>
            <div class="days-box_items beishu">
                <div
                :class="['days-box_item']"
                >
                <input type="text" v-model="selDaysUseVal"
                @blur="currentSelDays"
                >
                </div>
                <span class="unit">天</span>
            </div>
        </div> 
        <div class="notify-1">
            <span style="color:#fff"
                :style="{color:$state.theme =='red'?'#222':''}"
            
            >总操盘资金：</span>
            {{totalTradingAmount}} 元 = {{Number(form.margin).toFixed(0)}}元（保证金）+ {{fundsAmount}} 元（配资资金）
        </div>
        <div class="notify-1">
            <span style="color:#fff"
                :style="{color:$state.theme =='red'?'#222':''}"
            
            >需准备资金：</span>
             {{Number(Number(form.margin) + (fundsAmount * selManageRate * selDaysUseVal / 100)).toFixed(1)}}  元 = {{Number(form.margin).toFixed(0)}} 元（保证金）+ {{Number(fundsAmount * selManageRate * selDaysUseVal / 100).toFixed(1)}} 元 (一次性收取管理费)
        </div>
        <div class="days-box">
            <div class="guize">
                <span class="tile">预警线</span>
                <span class="mony">{{Number(Number(form.margin) + (form.margin * fundsSetting.daysWarning)).toFixed(0)}} 元</span>
                <span class="desc">（预警线 = 配资资金 + 保证金 X {{fundsSetting.daysWarning}}）</span>
            </div>
            <div class="guize">
                <span class="tile">平仓线</span>
                <span class="mony">{{Number(Number(form.margin) + (form.margin * fundsSetting.daysUnwind)).toFixed(0)}} 元</span>
                <span class="desc">（平仓线 = 配资资金 + 保证金 X {{fundsSetting.daysUnwind}}）</span>
            </div>
            <div class="guize">
                <span class="tile">管理费</span>
                <span class="mony">{{selManageRate}}% </span>
                <span class="desc">（{{fundsAmount}}X天利率{{selManageRate}}%X{{selDaysUseVal}}={{manageFee}}元）</span>
            </div>
            <div class="guize">
                <span class="tile">自定续费</span>
                <span class="desc">默认开启到期自动药期，配资管理费先付后用。</span>
            </div>
            <div class="guize">
                <span class="tile">操盘须知</span>
                <span class="desc">单只股票最大持仓比例为 {{selSingleHoldingRatio*100}}%。</span>
            </div>
        </div>

        <div class="days-submit1 days-submit"
        @click="Onsubmit()"
        >
            立即申请
        </div>
        <div class="days-submit1 days-submit-light"
        @click="toList()"
        >
            申请记录
        </div>

        <div class="days-notify2">
            <div class="warn">注意事项：</div>
            <div class="warn-detail">
                <div>1.保证金：您用于投资股票的资金，起点相当低。 </div>
                <div>
                 2.操盘期限；按天计算，不包含各类法定节假日。 
                </div>
                <div>3.按天支付管理费（不包含交交易印花税，过户费和佣金），无任何其他费用</div>
                <div>4.如操盘10天，一次性收取10天管理费</div>
                <div>5.交易日当天14：50之前的申请于当日生效（当天开始收取账户管理费），交易日当天14：50后的申请于下个交易日生效。</div>
                <div>6.股市有风险，投资需谨慎。</div>
            </div>
        </div>
        -->
        <div class="days-submit2"
        @click="Onsubmit()"
        >
            下一步
        </div>
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>

<script>
  import * as api from '../../axios/api'

export default {
    data() {
        return {
            bzjs:[
                { value:1000,label:'1000' },
                { value:1500,label:'1500' },
                { value:2000,label:'2000' },
                { value:3000,label:'3000' },
                { value:5000,label:'5000' },
                { value:8000,label:'8000' }, 
            ],
            baozhen:0,
            beishu:100,
            isloading: false,
            form: {
                margin: ''
            },
            selLever: 0,
            selManageRate: 0,
            selCycleType: '',
            selDaysUsePeriod: '',
            selDaysUseVal: '',
            selMinDay: '',
            selMaxDay: '',
            selSingleHoldingRatio: '',
            fundsSetting: {},
            fundsTypeList: [{}],
            rootSize:'',
            
            tabs:[
                {
                    id:1,
                    name:"按天配资"
                },
                {
                    id:2,
                    name:"按周配资"
                },
                {
                    id:3,
                    name:"按月配资"
                },
                {
                    id:4,
                    name:"免息配资"
                },
            ],
            
            active_tab_id:1,
            showPicker:false,
            columns:[],
        }
    },
    watch:{
        
    },
    mounted(){
        this.getRootSize()
        this.setRootSize()
    },
    beforeDestroy(){
        document.documentElement.style.fontSize = this.rootSize
    },
    methods:{
        open(){
            this.showPicker = true
        },
        close(){
            this.showPicker = false
        },
        onConfirm(value){
            console.log("value",value)
            this.selDaysUseVal = value;
            this.showPicker = false;
        },
        level_margin(level){
            return Number(this.form.margin)*Number(level)
        },
        changeTab(id){
            this.active_tab_id = id
            this.fundsType = id
            this.getFundsTypeList()
            if(this.fundsType==1){
                this.selDaysUsePeriod = this.fundsSetting.daysUsePeriod.split('|')[0] + '天'
                this.selMinDay = this.fundsSetting.daysUsePeriod.split('|')[0]
                this.selMaxDay = this.fundsSetting.daysUsePeriod.split('|')[this.fundsSetting.daysUsePeriod.split('|').length - 1]
                this.columns = []
                for(let i=this.selMinDay;i<=this.selMaxDay;i++){
                    this.columns.push(i)
                }
            }else if(this.fundsType==2){
                if(this.fundsSetting.weeksUsePeriod){
                    this.selDaysUsePeriod = this.fundsSetting.weeksUsePeriod.split('|')[0] + '周'
                    this.selMinDay = this.fundsSetting.weeksUsePeriod.split('|')[0]
                    this.selMaxDay = this.fundsSetting.weeksUsePeriod.split('|')[this.fundsSetting.weeksUsePeriod.split('|').length - 1]
                    this.columns = []
                    for(let i=this.selMinDay;i<=this.selMaxDay;i++){
                        this.columns.push(i)
                    }
                }else{
                    this.selDaysUsePeriod = ''
                    this.selMinDay = ''
                    this.selMaxDay = ''
                    this.columns = []
                }
            }else if(this.fundsType==3){
                if(this.fundsSetting.monthUsePeriod){
                    this.selDaysUsePeriod = this.fundsSetting.monthUsePeriod.split('|')[0] + '周'
                    this.selMinDay = this.fundsSetting.monthUsePeriod.split('|')[0]
                    this.selMaxDay = this.fundsSetting.monthUsePeriod.split('|')[this.fundsSetting.monthUsePeriod.split('|').length - 1]
                    this.columns = []
                    for(let i=this.selMinDay;i<=this.selMaxDay;i++){
                        this.columns.push(i)
                    }
                }else{
                    this.selDaysUsePeriod = ''
                    this.selMinDay = ''
                    this.selMaxDay = ''
                    this.columns = []
                }
            }else if(this.fundsType==4){
                if(this.fundsSetting.interestFreeDays){
                    this.selDaysUsePeriod = fundsSetting.interestFreeDays
                    this.selMinDay = fundsSetting.interestFreeDays
                    this.selMaxDay = fundsSetting.interestFreeDays
                    this.columns = []
                    for(let i=this.selMinDay;i<=this.selMaxDay;i++){
                        this.columns.push(i)
                    }
                }else{
                    this.selDaysUsePeriod = ''
                    this.selMinDay = ''
                    this.selMaxDay = ''
                    this.columns = []
                }
            }
        },
        getRootSize(){
            this.rootSize = document.documentElement.style.fontSize
        },
        // 设置根源素fontsize
        setRootSize(size=7.5){
          document.documentElement.style.fontSize = document.documentElement.clientWidth / size + 'px'
        },
        toList(){
            this.$router.push('/fundslist')
        },
        setBaozhen(val) {
            this.form.margin = val
        },
            async getUserInfo () {
        // 获取用户信息
        let data = await api.getUserInfo()
        if (data.status === 0) {
          // 判断是否登录
          this.$store.state.userInfo = data.data
        } else {
        }
      },
      async getFundsSetting () {
        // 分仓配资设置信息查询
        let data = await api.getFundsSetting()
        if (data.status === 0) {
          this.fundsSetting = data.data
          this.form.margin = ''
          this.selDaysUsePeriod = this.fundsSetting.daysUsePeriod.split('|')[0] + '天'
        //   this.selDaysUseVal = this.fundsSetting.daysUsePeriod.split('|')[0]
          this.selMinDay = this.fundsSetting.daysUsePeriod.split('|')[0]
          this.selMaxDay = this.fundsSetting.daysUsePeriod.split('|')[this.fundsSetting.daysUsePeriod.split('|').length - 1]
          this.columns = []
            //天数数组
            for(let i=this.selMinDay;i<=this.selMaxDay;i++){
                this.columns.push(i)
            }
        } else {
        }
      },
      async getFundsTypeList () {
        // 查询配资类型杠杆
        let data = await api.getFundsTypeList({cycleType:this.fundsType || 1})
        if (data.status === 0) {
          this.fundsTypeList = data.data.list
          if(this.fundsTypeList.length){
            //   this.selLever = this.fundsTypeList[0].lever
            this.selManageRate = this.fundsTypeList[0].manageRate
            this.selCycleType = this.fundsTypeList[0].lever + '倍'
            this.selSingleHoldingRatio = this.fundsTypeList[0].singleHoldingRatio
          }
        } else {
        }
      },
      getIntNumber () {
        if (this.form.margin >= this.fundsSetting.marginMax) {
          this.form.margin = this.fundsSetting.marginMax
        }
        this.form.margin = Math.floor(this.form.margin)
      },
      async Onsubmit () {
        // 1金额2期限3倍数
        if(this.form.margin>this.fundsSetting.marginMax){
            this.$toast('保证金不能大于'+this.fundsSetting.marginMax)
            return
        }
        if(this.form.margin<this.fundsSetting.marginMin){
            this.$toast('保证金不能小于'+this.fundsSetting.marginMin)
            return
        }
        if(!this.selDaysUseVal){
            this.$toast('请选择操盘期限')
            return
        }
        if(!this.selLever){
            this.$toast('请选择配资倍数')
            return
        }
        // 融资转指数
        let opt = {
          userId: this.$store.state.userInfo.id,
          userName: this.$store.state.userInfo.realName,
          userPhone: this.$store.state.userInfo.phone,
          fundsType: 1, // 配资类型：1按天、2按周、3按月
          margin: this.form.margin, //保证金
          fundsAmount: this.fundsAmount, //配资金额
          lever: this.selLever, //杠杆
          totalTradingAmount: this.totalTradingAmount, //总操盘金额
          tradersCycle: this.selDaysUseVal, //操盘期限
          manageFee: this.manageFee //管理费
        }
        let data = await api.addFundsApply(opt)
        if (data.status === 0) {
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.msg)
        }
      },
      currentSel(selVal) {
        if(!this.form.margin){
            return
        }
        this.selLever = selVal.lever
        this.selManageRate = selVal.manageRate
        this.selCycleType = selVal.lever + '倍'
        this.selSingleHoldingRatio = selVal.singleHoldingRatio
      },
      currentSelDays(selVal) {
        let val = parseInt(selVal.target.value)
        console.log(val)
        if (isNaN(val)) {
            this.selDaysUsePeriod = this.selMinDay + '天'
            this.selDaysUseVal = this.selMinDay
        } else {
            if (val< this.selMinDay) {
                this.selDaysUsePeriod = this.selMinDay + '天'
                this.selDaysUseVal = this.selMinDay
            } else if(val> this.selMaxDay) {
                this.selDaysUsePeriod = this.selMaxDay + '天'
                this.selDaysUseVal = this.selMaxDay
            } else {
                this.selDaysUsePeriod = val + '天'
                this.selDaysUseVal = val
            }
        }
        // this.selDaysUsePeriod = selVal + '天'
        // this.selDaysUseVal = selVal
      }
    },
    created() {
         this.getUserInfo()
        this.getFundsSetting()
        this.getFundsTypeList()
    },
    computed:{
        zidinyi() {
            return !this.bzjs.map(it => it.value).includes(this.form.margin)
        },
        fundsAmount () { //配资金额= 保证金*杠杆倍数
        if (this.form.margin) {
          return Number(this.form.margin * this.selLever).toFixed(0)
        } else {
          return 0
        }
      },
      totalTradingAmount () {//总操盘金额
        if (this.form.margin) {
          return Number(Number(this.form.margin) + (this.form.margin * this.selLever)).toFixed(0)
        } else {
          return 0
        }
      },
      manageFee () {//管理费
        if (this.selDaysUseVal) {
          return (this.fundsAmount * this.selManageRate * this.selDaysUseVal / 100).toFixed(1)
        } else {
          return 0
        }
      }
    }
}
</script>

<style lang="less" scoped>
.days-submit2{
    background-color: #FA3C06;
    position: fixed;
    bottom: 0;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100vw;
}
.title1{
    font-size: 16px;
    margin: 20px auto;
    color: #333;
    text-align: center;
}
.cu-input-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.cu-input{
    border:none;
    background: none;
    text-align: center;
    font-size: 16px;
    display: flex;
    flex:1;
    justify-content: center;
    align-items: center;
}
input::placeholder{
    color: #999;
    font-size: 16px;
}
.select-card1{
    display: flex;
    width: 94%;
    margin: 0 auto 20px;
    box-sizing: border-box;
    padding: 0;
    flex-wrap: wrap;
    .card-item{
        width: 30%;
        height: 80px;
        flex-shrink: 0;
        background-color: #E8E8E8;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        margin-bottom: 10px;
        margin-left: 0;
        border: 1px solid transparent;
        .money{
            font-size: 18px;
        }
        span{
            margin-top: 6px;
            font-size: 16px;
            color: #666;
        }
    }
    .white-bg{
        background-color: #fff;
        span{
            color: #333;
        }
    }
    .card-item:nth-child(n){
        margin-right:auto;
    }
    .active{
        border: 1px solid #FF3C02;
        span{
            color: #FF3C02;
        }
    }
}
.select-card{
    display: flex;
    border-radius: 8px;
    width: 94%;
    margin: 10px auto 20px;
    background-color: #fff;
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    padding:10px;
    justify-content: space-around;
    .select-btn{
        font-size: 14px;
        padding:8px 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #FA3C06;
        color:#FA3C06;
    }
    .active{
        background-color: #FA3C06;
        color:#fff;
    }
}
.top-header{
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    .left-icon{}
    .right-icon{}
    .title{
        font-size: 16px;
        color:#fff;
    }
}
.wrapper {
    padding-bottom: 100px;
    background:linear-gradient(to bottom,#FF3C02 10%);
    background-size: 100% 100px;
    background-repeat: no-repeat;
    .days-box {
        display: block;
        width: 94%;
        margin:.3rem auto;
        padding: .6rem .2rem .12rem .2rem;
        background-color: #1F2636;
        border-radius: .1rem;
        &_tile {
            padding: .12rem 0 .12rem .25rem;
            position: relative;
            font-size: .32rem;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            border-bottom: 1px solid #fff2;
            &:after {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                width: .1rem;
                height: .1rem;
                margin-top: -.05rem;
                background: #138EB4;
                border-radius: 50%;
            }
        }
        &_items {
            display: flex;
            justify-content: space-between;
            padding-top: .25rem;
            flex-wrap: wrap;
            padding-bottom: .15rem;
            &.beishu {
                justify-content: flex-start;
                .days-box_item {
                    margin-right: .15rem;
                }
            }
            span.unit {
            line-height: .44rem;
            }
        }
        &_item {
            width: 1.5rem;
            height: .44rem;
            line-height: .44rem;
            border-radius: 3px;
            background-color: #2D2E3B;
            color: #fff;
            font-size: .24rem;
            margin-bottom: .2rem;
            text-align: center;
            padding: 0 .1rem;
            input {
                text-align: center;
                width: 100%;
            }
            &.active {
                background-color: #E00101;
            }
        }
        .guize {
            margin-bottom: .24rem;
            display: flex;
            align-items: center;
            .tile {
                width: 1.5rem ;
                height: .4rem;
                font-size: .22rem;
                line-height: .4rem;
                text-align: center;
                background-color: #138EB4;
                color: #fff;
                padding: 0.02rem 0rem;
                margin-right: .1rem;
                display: block;
            }
            .mony{
                color: #fff;
                font-size: .22rem;
            }
            .desc {
                color :#A9AAAE ;
                font-size: .22rem;
            }
        }
    }
    .notify-1 {
        padding: .2rem .3rem;
        font-size: .24rem;
        letter-spacing: 0;
        color: #999;
    }
    .days-submit1 {
        background-color: #024DA1;
        width: 94%;
        height: .66rem;
        line-height: .66rem;
        margin: 0 auto;
        color: #fff;
        border-radius: .33rem;
        text-align: center;
        margin-top:10px;
    }
    .days-notify2 {
        margin-top: .8rem;
        padding: 0 .3rem .3rem;
        .warn {
            font-size: .36rem;
            font-weight: bold;
            margin-bottom: .2rem;

        }
        .warn-detail{
            color: #8D8F94;
            div {
                margin-bottom: .2rem;
            }
        }
    }
}
.red-theme {
    .days-box{
        background-color: #fff;
    }
    .wrapper .days-box_tile {
        color: #000;
        border-bottom-color: #E9E9E9;
    }
    .wrapper .days-box_tile:after {
        background:#000;
    }
    .wrapper .days-box_items span.unit{
        color: #222;
    }
    .wrapper .days-box_item{
        background-color: #D9D9D9;
        border: 1px solid #AEAEAE;
        color: #222;
    }
    .wrapper .days-box_item.active {
        background-color: #E00101;
        border: 1px solid #E00101;
        color: #fff;
    }
    .wrapper .days-box .guize .tile {
        background-color: #E00101;
    }
    .wrapper .days-box .guize .mony {
        color: #222;
    }
    .wrapper .days-box .guize .desc {
        color: #222;
    }
    .wrapper .days-submit {
        background-color: #E00101;
    }
    .wrapper .days-submit-light{
        background-color: #fff;
        border: 1px solid #E00101;
        color: #E00101;
    }
    .wrapper .days-notify2 .warn {
        color: #000;
    }
}
</style>